<template>
  <div class="nav-bar">
    <van-nav-bar
      :title="title"
      :left-text="leftText"
      :left-arrow="leftArrow"
      @click-left="handleBack"
    >
      <template #right>
        <van-popover 
        placement="bottom-end"
        v-model:show="showPopover"
         :actions="actions"
          @select="onSelect">
          <template #reference>
            <van-icon name="ellipsis" size="24" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
  </div>
</template>

<script setup lang="ts"> 
import { computed ,ref } from "vue"
// import { showToast } from 'vant'
import { useRoute, useRouter } from 'vue-router'

//调用useRouter（）方法，获取当前激活的路由对象的引用这与在选项式API中使用的this.router一致
const router = useRouter()

//调用useRoute（）方法，获取当前激活的路由对象的引用这与在选项式API中使用的this.route 一致
const route = useRoute()

//当前页面的标题
const title = computed(() => (route.meta?.title ?? "天天优选") as string) 

const handleBack = () => {

  //  window.history.back()
  router.back()
}
//是否显示弹出菜单 
const showPopover = ref(false);

// 通过 actions 属性来定义菜单选项
const actions = [
  { text: '首页',icon:"home-o" ,path:"/home" },
  { text: '购物车',icon:"shopping-cart-o",path:"/cart" },
  { text: '我的',icon:"user-o" ,path:"/mine"},
];

const onSelect =  (action:any) =>{
  console.log("action",action)
  router.push(action.path)
}


//当前是否 tabbar 页面，后退返回操作是否可用
// const leftText = computed(()=>{route.meta?.inTabbar ? "":"返回"})
// const leftArrow = computed(()=>{route.meta?.inTabbar!==true})
const leftText = computed(() => route.meta?.inTabbar ? '' : '返回')
const leftArrow = computed(() => route.meta?.inTabbar !== true)

</script> 

<style lang="less" scoped></style>
